<div data-page="tabs-swipeable" class="page toolbar-fixed">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left"><a href="../index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
            <div class="center">STATISTICS</div>
            <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
        </div>
    </div>
    <div class="toolbar tabbar">
        <div class="toolbar-inner">
            <a href="#tab1" class="active tab-link">MONTH</a>
            <a href="#tab2" class="tab-link">YEAR</a>
            <a href="#tab3" class="tab-link">ALL</a>
        </div>
    </div>
    <div class="tabs-swipeable-wrap">
        <div class="tabs">
            <div id="tab1" class="page-content tab active">
                <div class="list-block accordion-list">
                    <ul id="monthList">
                        <!--共用年份查询的模板-->
                    </ul>
                </div>
            </div>
            <div id="tab2" class="page-content tab">
                <div class="content-block">
                    <form class="list-block inputs-list">
                        <ul>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title floating-label">YEAR</div>
                                        <div class="item-input item-input-field">
                                            <select id="yearSearch">
                                                <option>2017年</option>
                                                <option>2016年</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title floating-label">MONTH</div>
                                        <div class="item-input item-input-field">
                                            <select id="monthSearch">
                                                <option>1月</option>
                                                <option>2月</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                    <div class="list-block accordion-list">
                        <ul id="yearList">


                        </ul>
                        <script id="monthListTmpl" type="text/html">
                            <% for (var i=0;i < month.length;i++) { %>
                            <li class="accordion-item">
                                <a href="#" class="item-link item-content">
                                    <div class="item-inner">
                                        <div class="item-title"><%= month[i].date %></div>
                                        <div class="item-after"><span class="badge bg-red">￥<%= month[i].total / 100  %></span></div>
                                    </div>
                                </a>
                                <div class="accordion-item-content">
                                    <div class="list-block">
                                        <ul>
                                            <% for(var j=0;j < month[i].list.length;j++ ){ %>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                                    <div class="item-inner">
                                                        <div class="item-title"> <%= month[i].list[j].content %></div>
                                                        <div class="item-after"><span class="badge bg-red">￥<%=month[i].list[j].amount / 100 %></span></div>
                                                    </div>
                                                </div>
                                            </li>
                                            <% } %>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <% } %>
                        </script>
                    </div>
                </div>
            </div>
            <div id="tab3" class="page-content tab">
                <div class="content-block" style="padding: 0;margin: 15px 0">
                    <div class="list-block accordion-list">
                        <ul id="allList">

                        </ul>
                        <script type="text/html" id="allListTmpl">
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">TOTAL</div>
                                        <div class="item-after"><span class="badge bg-red" id="allTotal">￥<%=data.total / 100 %></span></div>
                                    </div>
                                </div>
                            </li>

                            <% for(var i=0;i< data.list.length;i++){ %>
                            <li class="accordion-item">
                                <a href="#" class="item-link item-content">
                                    <div class="item-inner">
                                        <div class="item-title"><%=data.list[i].year%>年</div>
                                        <div class="item-after"><span class="badge bg-red">￥<%= data.list[i].total / 100  %></span></div>
                                    </div>
                                </a>
                                <div class="accordion-item-content">
                                    <div class="list-block">
                                        <ul>
                                            <% for(var j=0;j< data.list[i].list.length;j++){ %>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                                    <div class="item-inner">
                                                        <div class="item-title"><%=data.list[i].list[j].month%>月</div>
                                                        <div class="item-after"><span class="badge bg-red">￥<%=data.list[i].list[j].amount / 100 %></span></div>
                                                    </div>
                                                </div>
                                            </li>
                                            <% } %>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <% } %>
                        </script>
                    </div>
                </div>
                <div class="content-block">
                    <div id="map" style="width: calc(100% - 20px);height: 200px">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>